import React, { Component } from 'react';

import './formtest.less';

 export default class Formtest extends Component{
     constructor(props){
         super(props);
         this.state = {
            list:[],
            userName:'',
            userPhon:'',
            userAddress:''
            
         }

         this.handNameclick = this.handNameclick.bind(this);
         this.handIphonclick = this.handIphonclick.bind(this);
         this.handAddressclick = this.handAddressclick.bind(this);
         this.handSubmit= this.handSubmit.bind(this);
     }
    
     handNameclick(e){
        //const testName = /^([\u4e00-\u9fa5]){2,7}$/;
        const userName = e.target.value;
        
        this.setState({
            userName : userName
        })

     }

    handIphonclick(e){
        //const tsetPhon = /^[1][3,4,5,7,8][0-9]{9}$/;

        this.setState({
            userPhon:e.target.value
        })
    }

    handAddressclick(e){
        this.setState({
            userAddress:e.target.value
        })
    }


    handSubmit(e){
        alert(["userName :" + this.state.userName,"userPhon :"+this.state.userPhon,"userAddress :"+this.state.userAddress])
        
        e.preventDefault();
        
        this.setState({
            list:[...this.state.list,this.state.userName,this.state.userPhon,this.state.userAddress],
            userName:'',
            userPhon:'',
            userAddress:''
            
        })
    }

    render(){
        return(
            <div className="formBox">
                <form onSubmit={this.handSubmit}>
                    <ul>
                        <li>
                            <span>姓名:</span>
                            <input type="text" placeholder="请输入姓名" value={this.state.userName} onChange={this.handNameclick}/>
                        </li>
                        <li>
                            <span>手机号:</span>
                            <input type="text" placeholder="请输入手机号" value={this.state.userPhon} onChange={this.handIphonclick}/>
                        </li>
                        <li>
                            <span>地址:</span>
                            <input type="text" placeholder="请输入地址" value={this.state.userAddress} onChange={this.handAddressclick}/>
                        </li>
                    </ul>
                    <input className="submitBtn" type="submit" value="提交"/>
                </form>
                
            </div>
        )
    }
    
}
